<template>
  <div class="menu-tabs-wrap flex border-bottom">
    <div
      :class="['menu-item flex1', { active: current == index }]"
      v-for="(item, index) in list"
      :key="index + item.label"
      @click="handleItemClick(index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script lang="ts">
import { PropType, defineComponent } from "vue";
export default defineComponent({
  props: {
    list: {
      type: Array as PropType<CustomTypeMenuTabs.Menuitem[]>,
      default: () => [],
    },
    current: {
      type: [String, Number],
      default: 0,
    },
  },
  methods: {
    handleItemClick(index) {
      this.$emit("update:current", index);
    },
  },
});
</script>
<style lang="scss" scoped>
.menu-tabs-wrap {
  height: 80px;
  position: relative;
  .menu-item {
    text-align: center;
    line-height: 80px;
    font-size: 30px;
    &.active {
      color: $primy-color;
      position: relative;
      &::after {
        content: "";
        display: block;
        height: 4px;
        background: $primy-color;
        width: 100px;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
